<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <#include "../../common/header.ftl">
</head>
<body class="btn-body">
<div class="container-fluid">
    <#include "../../common/left-nav.ftl">
    <input type="hidden" value="${carId}" id="carId">
    <div class="main-box">
        <ol class="breadcrumb crumbs always-top">
            <li><a href="${base}/admin/car">车辆管理</a></li>
            <li class="active">详情</li>
            <div class="form-btns">
                <button type="button" class="btn btn-success btn-sm" onclick="openDriverDialog()">
                    <span class="glyphicon glyphicon-user"></span> 绑定驾驶员
                </button>
                <span class="separate">|</span>
                <a href="${base}/admin/car/edit?id=${carId}" type="button" class="btn btn-primary btn-sm">
                    <span class="glyphicon glyphicon-pencil"></span> 编辑
                </a>

                <button type="button" class="btn btn-danger btn-sm" onclick="openRemoveCar()">
                    <span class="glyphicon glyphicon-trash"></span> 注销
                </button>
            </div>
        </ol>

        <div class="caption">
            <h2 data-field="carNumber">-</h2>

        </div>

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-4">
                    <div class="image-box">
                        <img src="${base}/res/images/no_pic.png" data-field-target="img" data-field="frontPicPath">
                        <span class="title">车辆正面</span>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="image-box">
                        <img src="${base}/res/images/no_pic.png" data-field-target="img" data-field="sidePicPath">
                        <span class="title">车辆侧面</span>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="image-box">
                        <img src="${base}/res/images/no_pic.png" data-field-target="img" data-field="drivingPicPath">
                        <span class="title">行驶证</span>
                    </div>
                </div>
            </div>

            <div class="row" style="margin-top: 20px;">
                <div class="col-md-6">
                    <div class="panel panel-freight">
                        <div class="panel-heading"><b>车辆基础信息</b></div>
                        <div class="panel-body">
                            <div class="details-panel">
                                <div class="item">
                                    <span class="field">车牌号</span>
                                    <span class="value" data-field="carNumber">-</span>
                                </div>

                                <div class="item">
                                    <span class="field">车型</span>
                                    <span class="value" data-field="type" data-field-target="enum"
                                          data-convert-func="showCarTypeName">-</span>
                                </div>

                                <div class="item">
                                    <span class="field">颜色</span>
                                    <span class="value" data-field="color">-</span>
                                </div>
                                <div class="item">
                                    <span class="field">注册地</span>
                                    <span class="value" data-field="regAddr">-</span>
                                </div>
                                <div class="item">
                                    <span class="field">车架号</span>
                                    <span class="value" data-field="frameNo">-</span>
                                </div>
                                <div class="item">
                                    <span class="field">行驶证号</span>
                                    <span class="value" data-field="drivingNo">-</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="panel panel-freight">
                        <div class="panel-heading"><b>运输信息</b></div>
                        <div class="panel-body">
                            <div class="details-panel">
                                <div class="item">
                                    <span class="field">车厢尺寸</span>
                                    <span class="value">
                                        <b data-field="boxLong">-</b> m *
                                        <b data-field="boxWidth">-</b> m *
                                        <b data-field="boxHigh">-</b> m
                                    </span>
                                </div>

                                <div class="item">
                                    <span class="field">车厢类型</span>
                                    <span class="value" data-field="boxType" data-field-target="enum"
                                          data-convert-func="showCarBoxTypeName">-</span>
                                </div>

                                <div class="item">
                                    <span class="field">车身自重</span>
                                    <span class="value"><b data-field="weight">-</b> T</span>
                                </div>
                                <div class="item">
                                    <span class="field">允许载重</span>
                                    <span class="value"><b data-field="maxLoad">-</b> T</span>
                                </div>
                                <div class="item">
                                    <span class="field">常拉货物</span>
                                    <span class="value" data-field="regularGoods">-</span>
                                </div>
                                <div class="item">
                                    <span class="field">常跑路线</span>
                                    <span class="value" data-field="route">-</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-freight">
                        <div class="panel-heading"><b>驾驶员信息</b></div>
                        <div class="panel-body">
                            <div class="details-panel" id="driverBox">
                                <div style="text-align: center;color: #858585"><i>没有绑定司机信息</i></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script type="text/javascript">
    var carId, ctx;
    $(document).ready(function () {
        ctx = $('#base').val();
        carId = $('#carId').val();
        $.httpclient.get(API_CAR + '/' + carId, {
            time: new Date().getTime()
        }, function (data) {
            if (data.code === 'SUCCESS') {
                fullField(data.obj);
            }
        });

        $.httpclient.get(API_CAR + '/driver', {
            carId: carId,
            time: new Date().getTime()
        }, function (data) {
            if (data.code === 'SUCCESS') {
                data = data.obj;
                if (data.length > 0) {
                    $('#driverBox').empty();
                    for (var i = 0; i < data.length; i++) {
                        var item = data[i];
                        var html = '<div class="details-item">' +
                            '    <div class="ctrl-btn">' +
                            '        <button type="button" class="btn btn-sm" onclick="removeDriver(' + item.id + ')">' +
                            '            <span class="glyphicon glyphicon-trash"></span>' +
                            '        </button>' +
                            '    </div>' +
                            '    <div class="row">' +
                            '        <div class="col-md-6">' +
                            '            <div class="item">' +
                            '                <span class="field">姓名</span>' +
                            '                <span class="value">' + item.realName + '</span>' +
                            '            </div>' +
                            '        </div>' +
                            '        <div class="col-md-6">' +
                            '            <div class="item">' +
                            '                <span class="field">联系电话</span>' +
                            '                <span class="value">' + item.tel + '</span>' +
                            '            </div>' +
                            '        </div>' +
                            '    </div>' +
                            '    <div class="row">' +
                            '        <div class="col-md-6">' +
                            '            <div class="item">' +
                            '                <span class="field">驾驶证号</span>' +
                            '                <span class="value">' + item.identityNo + '</span>' +
                            '            </div>' +
                            '        </div>' +
                            '        <div class="col-md-6">' +
                            '            <div class="item">' +
                            '                <span class="field">联系地址</span>' +
                            '                <span class="value">' + item.address + '</span>' +
                            '            </div>' +
                            '        </div>' +
                            '    </div>' +
                            '    <div class="row">' +
                            '        <div class="col-md-6">' +
                            '            <div class="item">' +
                            '                <span class="field">运输经营许可</span>' +
                            '                <span class="value">' + item.practicing + '</span>' +
                            '            </div>' +
                            '        </div>' +
                            '        <div class="col-md-6">' +
                            '            <div class="item">' +
                            '                <span class="field">从业资格证</span>' +
                            '                <span class="value">' + item.transportLicense + '</span>' +
                            '            </div>' +
                            '        </div>' +
                            '    </div>' +
                            '</div>';
                        $('#driverBox').append(html);
                    }
                } else {
                    $('#driverBox').html('<div style="text-align: center;color: #858585"><i>没有绑定司机信息!</i></div>')
                }


            }
        })
    });

    function openDriverDialog() {
        $.httpclient.get(API_DATA + '/driver', {
            time: new Date().getTime()
        }, function (data) {
            bootbox.prompt({
                title: "请选择司机",
                inputType: 'select',
                inputOptions: data.obj,
                buttons: {
                    confirm: {
                        label: '确认',
                        className: 'btn-success'
                    },
                    cancel: {
                        label: '取消',
                        className: 'btn-danger'
                    }
                },
                callback: function (result) {
                    if (result) {
                        $.httpclient.post(API_CAR + '/driver/bind', JSON.stringify({
                            carId: carId,
                            driverId: result
                        }), function (data) {
                            location.reload();
                        });
                    }
                }
            });
        });
    }


    function removeDriver(driverId) {
        bootbox.confirm({
            message: "是否决定移除该驾驶员?",
            buttons: {
                confirm: {
                    label: '是',
                    className: 'btn-success'
                },
                cancel: {
                    label: '否',
                    className: 'btn-danger'
                }
            },
            callback: function (result) {
                if (result) {
                    $.httpclient.post(API_CAR + '/driver/remove', JSON.stringify({
                        carId: carId,
                        driverId: driverId
                    }), function () {
                        location.reload();
                    });
                }
            }
        });
    }


    function openRemoveCar() {
        bootbox.confirm({
            message: "是否确认注销该车辆信息?",
            buttons: {
                confirm: {
                    label: '是',
                    className: 'btn-success'
                },
                cancel: {
                    label: '否',
                    className: 'btn-danger'
                }
            },
            callback: function (result) {
                if (result) {
                    $.httpclient.delete(API_CAR + '/' + carId, null, function (data) {
                        if (data.code === 'SUCCESS') {
                            location.href = $('#base').val() + '/admin/car';
                        } else {
                            bootbox.alert(data.message);
                        }

                    })
                }
            }
        });
    }
</script>